import React from 'react';
import '../styles/Home.css';

const MarketStatusIndicator = ({ upCount, neutralCount, downCount }) => {
  return (
    <div className="market-status-container">
      <div className="market-status-lines">
        <div 
          className="market-status-line up" 
          style={{ width: `${upCount}%` }}
        ></div>
        <div 
          className="market-status-line neutral" 
          style={{ width: `${neutralCount}%` }}
        ></div>
        <div 
          className="market-status-line down" 
          style={{ width: `${downCount}%` }}
        ></div>
      </div>
      <div className="market-status-labels">
        <span className="up-label">上涨: {upCount}家</span>
        <span className="down-label">下跌: {downCount}家</span>
      </div>
    </div>
  );
};

export default MarketStatusIndicator;